/*主题颜色,通过变量来实现*/
page,view,text,swiper,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@mixin flex_XY($x:center,$y:center){
    display: flex;
    justify-content: $x;
    align-items: $y;
}
page{
    /*定义主题颜色*/
    --themeColor:#eb4450;
    /*定义统一字体大小*/
    font-size: 28rpx;
}
// 背景图片
@import "bg.scss";
// 设置背景图片 base64编码
.root_wrap{
    @include bg_img()
}

/*按钮的各种颜色*/
@mixin multicoloured{
    .orange{
        background-color: #D3773C;
        box-shadow: 0px 4px 0px #bc6535;
        color: white;
    }
    .brown{
        background-color: #6F5943;
        box-shadow: 0px 4px 0px #715e47;
        color: white;
    }
    .purple{
        background-color: #a22dc9;
        box-shadow: 0px 4px 0px #7c259c;
        color: white;
    }
    .blue{
        background-color: #2478cf;
        box-shadow: 0px 4px 0px #1a5da0;
    }
    .black{
        color: white;
        background-color: #454545;
        box-shadow: 0px 4px 0px #414141;
    }
}
/*简单计算器样式*/
.general{
    height: 100vh;
    position: relative;
    .wrap_panel{
        height: 220rpx;
    }
    .btns_panel{
        @include flex_XY(space-between,flex-start);
        flex-wrap: wrap;
        padding: 10rpx;
        position: fixed;
        bottom: 0rpx;
        text{
            width: 23%;
            @include flex_XY;
            background-color: #95cc71;
            overflow: hidden;
            height: 90rpx;
            margin: 15rpx 0;
            font-size: 40rpx;
            border-radius: 10rpx;
            font-weight: 600;
            background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
            font-family: sans-serif;
            box-shadow: 0px 4px 0px #6b9a4d;
            &:active{
                box-shadow: 0px 2px 0px #74a152;
                background-color: green;
            }
        }
        /*按钮的各种颜色*/
        @include multicoloured;
        /*打赏按钮*/
        .giveaReward{
            background-color: #35d72c;
            box-shadow:none;
            height: 100rpx;
            @include bg_pay;
            box-shadow: none;
            &:active{
                box-shadow: none;
                background-color: #4e78ff;
            }
        }
        .storage{
            width: 100%;
            border-bottom: 3rpx solid #2cb2ff;
            @include flex_XY(flex-start,flex-end);
            padding: 0 15rpx;
            font-size: 40rpx;
            font-weight: 600;
            color: #cccccc;
        }
    }
}

/*高级计算机样式*/
.complex{
    .wrap_panel{
        height: 150rpx;
    }
    .btns_panel{
        margin-top: 15rpx;
        height: calc(100vh - 260rpx);
        overflow: auto;
        /*单选按钮区域*/
        .radio_btns{
            radio-group{
                width: 100%;
                @include flex_XY(space-between,flex-start);
                radio{
                    flex: 1;
                    text-align: center;
                }
                radio .wx-radio-input{
                    width: 35rpx;
                    height: 35rpx;
                }
            }
            .text{
                @include flex_XY(space-between,flex-start);
                width: 100%;
                text{
                    flex: 1;
                    text-align: center;
                    font-size: 25rpx;
                    color: white;
                }
            }
            
        }
        /*综合区域*/
        .synthesize{
            margin-top: 10rpx;
            display: flex;
            .checkboxs{
                flex: 2;
                checkbox-group{
                    display: flex;
                    margin-bottom: 5rpx;
                    checkbox{
                        text-align: center;
                        flex: 1;
                    }
                }
                checkbox .wx-checkbox-input{
                    width: 30rpx;
                    height: 30rpx;
                }
                .text{
                    display: flex;
                    text{
                        flex: 1;
                        text-align: center;
                        color: white;
                        font-size: 25rpx;
                    }
                }
                
            }
            .storage{
                flex: 3;
                border-bottom: 3rpx solid #2cb2ff;
                @include flex_XY(flex-start,flex-end);
                padding: 0 15rpx;
                font-size: 40rpx;
                font-weight: 600;
                color: #cccccc;
            }
            /*退格、清屏*/
            .btns{
                flex: 2;
                @include flex_XY(space-between,flex-start);
                padding-right: 10rpx;
                .btn{
                    width: 47%;
                    height: 95%;
                    @include flex_XY;
                    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
                    font-size: 30rpx;
                    border-radius: 10rpx;
                    font-weight: 600;
                    color: white;
                    box-shadow: 0px 4px 0px #6b9a4d;
                }
                .back{
                    background-color: #ccdf0b;
                    &:active{
                        box-shadow: 0px 2px 0px #adad00;
                        background-color: green;
                    }
                }
                .clear{
                    background-color: red;
                    &:active{
                        box-shadow: 0px 2px 0px black;
                        background-color: black;
                    }
                }
            }
        }
        /*按钮列表区域*/
        .btns_items{
            width: 100%;
            @include flex_XY(space-between,flex-start);
            flex-wrap: wrap;
            padding: 10rpx;
            text{
                width: 18.5%;
                @include flex_XY;
                background-color: #95cc71;
                overflow: hidden;
                height: 90rpx;
                margin: 9rpx 0;
                font-size: 35rpx;
                border-radius: 10rpx;
                font-weight: 600;
                background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
                font-family: sans-serif;
                box-shadow: 0px 4px 0px #6b9a4d;
                &:active{
                    box-shadow: 0px 2px 0px #74a152;
                    background-color: green;
                }
            }
            /*按钮的各种颜色*/
            @include multicoloured;
            .disabled{
                background-color: #cccccc;
                box-shadow:none;
                &:active{
                    box-shadow: none;
                    background-color: #cccccc;
                }
            }
        }
    }
}